<template>
  <div :class="currentDisplayItemClass">
    <span class="knowledge-item-span" v-html="currentDisplayContentHtml"></span>
  </div>
</template>

<script>
import {getChangeLineStyleContent} from "@/utils/styleUtil";

export default {
  name: "KnowledgeItemDiv",
  props: {
    type: String,
    content: String,
    sizeType: String
  },
  computed: {
    currentDisplayContentHtml() {
      return getChangeLineStyleContent(this.content, this.sizeType);
    },
    currentDisplayItemClass() {
      if (this.sizeType === 'small') {
        return `knowledge-item-stack-${this.type}-div`
      }
      if (this.sizeType === 'big') {
        return `knowledge-${this.type}-div`
      }
      return '';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/div.scss";
.knowledge-item-span {
  padding: 0 25px;
}

.knowledge-item-stack-word-div {
  @include knowledge-item-stack-div($word-div-color, $word-border-color);
}

.knowledge-item-stack-grammar-div {
  @include knowledge-item-stack-div($grammar-div-color, $grammar-border-color);
}

.knowledge-word-div {
  @include knowledge-item-div($word-div-color, $word-border-color);
}

.knowledge-grammar-div {
  @include knowledge-item-div($grammar-div-color, $grammar-border-color);
}

</style>